<!-- 客户订单 -->
<template>
    <view class="page bgf8">
        <status-bar title='客户订单' :goHome='fromShare'></status-bar>
        <view class="classNav bgwhite" :style="{top: totalHeight+'px'}">
            <u-tabs :list="tabList" :lineColor="color" lineWidth="32" @click="tabClick" itemStyle="height: 50px;"
                :inactiveStyle="{color:'#777',fontSize:'32rpx',transform:'scale(1)'}"
                :activeStyle="{color:'#444',fontSize:'32rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
        </view>
        <view class="p-top100" v-if="list.length">
            <view class="order-item padding30 bgwhite m-bot10" v-for="(item,index) in list" :key="index">
                <view class="d-flex j-sb a-center m-bot20">
                    <view class="size30 color_11">订单号: {{ item.order_code }}</view>
                    <view class="color_66" v-if="item.state == 0">待支付</view>
                    <view class="label" style="background: #FF6046;" v-if="item.state == 1">待备货</view>
                    <view class="label" style="background: #f9ae3d;" v-if="item.state == 2">待收货</view>
                    <view class="color_66" v-if="item.state == 3">待取货</view>
                    <view class="label" style="background: #3c9cff;" v-if="item.state == 4">待评价</view>
                    <view class="label" style="background: #5ac725;" v-if="item.state == 5">已完成</view>
                    <view class="color_66" v-if="item.state == 6">退货中</view>
                    <view class="color_66" v-if="item.state == 7">换货中</view>
                    <view class="color_66" v-if="item.state == 96">退款成功</view>
                    <view class="color_66" v-if="item.state == 97">已失效</view>
                    <view class="color_66" v-if="item.state == 98">已取消</view>
                </view>
                <view class="d-flex j-sb a-center">
                    <view class="d-flex flex-1">
                        <image :src="$imgUrls(item.goods[0].img)" mode="aspectFill" class="img"></image>
                        <view class="p-left20 p-top16 p-bot16 d-flex f-column j-sb">
                            <view class="color_22">
                                <text class="size26">购买人: {{ item.v_name }}</text>
                                <text class="size22 p-left22">{{ item.v_tel }}</text>
                            </view>
                            <view class="h6 color_77">购买时间: {{ item.add_time }}</view>
                        </view>
                    </view>
                    <view class="size34 color_FOD">￥{{ item.total }}</view>
                </view>
            </view>
        </view>

        <emptys v-else  title='您还没有相关的订单' ></emptys>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            tabList: [
                { name: '全部', state: '' },
                { name: '待备货', state: '1' },
                { name: '待收货', state: '2' },
                { name: '待评价', state: '4' },
                { name: '已完成', state: '5' }
            ],
            state: '',
            list: [],
            guest_id: ''
        }
    },
    computed: {
        ...mapState(['color','totalHeight'])
    },
    onLoad(e){
        if(e.guest_id) this.guest_id = e.guest_id
        this.getList()
    },
    methods: {
        getList(){
            this.$http.get({
                url: '/PrivateSphereApi/privateGuestOrder',
                data: {
                    state: this.state,
                    guest_id: this.guest_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.list = res.data.list || []
            })
        },
        tabClick({state}){
            console.log(state)
            this.state = state
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
.classNav {
    position: fixed;
    left: 0;
    z-index: 10;
    width: 100%;
}
.order-item {
    height: 230rpx;
    .img {
        width: 120rpx;
        height: 120rpx;
    }
    .label {
        width: 100rpx;
        line-height: 40rpx;
        text-align: center;
        border-radius: 8rpx;
        font-size: 22rpx;
        color: #fff;
        letter-spacing: 2rpx;
    }
}
</style>